<template>
	<scroll-view  class="NavTab" scroll-with-animation scroll-x>
		<view  ref="NavTab_dom" class="NavTab_inner">
			<view class="tab" v-for="(item, idx) in tabList" :key="idx" @click="handlClick(item, idx)" :class="checked ==idx ? 'checked' : ''">
				{{ item.name }}
				<text v-if="checked ==idx" class="line">
					<text class="i-line"></text>
				</text>
			</view>
		</view>
	</scroll-view>
</template>
<script>
export default {
	name: 'NavTab',
	data() {
		return {
			checked: 0
		};
	},
	props: {
		tabList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		lineAnimate(){
			console.log(this.$refs.NavTab_dom.childDatas)
			return ;
			const _this = this;
			// let view =uni.createSelectorQuery().select('.wuc-tab-item');
			let query =uni.createSelectorQuery().in(this);
			//selectAll
			const viewItem = query.select('.NavTab') ;
			console.log(viewItem)
			return
			if(viewItem){
				viewItem.fields({size: true}, data => {
					_this.categoryHeight = data.height + 'px';
				}).exec();
			}
		},
		handlClick(item, idx) {
			if (this.checked === idx) return false;
			this.checked = idx;
			// this.lineAnimate();
		}
	},
	computed: {

		scrollLeft() {
			return (this.tabCur - 1) * 80;
		}
	}
};
</script>
<style lang="scss" scoped>
div,
scroll-view,
swiper {
	box-sizing: border-box;
}
.NavTab {
	width: 100%;
	height: 90rpx;
	background-color: #fff;
	.NavTab_inner{
		display: flex;
		flex-flow: row nowrap;

		.tab {
			position: relative;
			height:90rpx;
			line-height: 90rpx;
			text-align: center;
			flex: 1;
			color:#818181;
      border-bottom: 1rpx;
		}
		.line{
			position: absolute;
			left:0;
			bottom:0;
			width: 100%;
			height:3rpx;
			background-color: #0a7cfc;
			.i-line{

			}
		}
	}
}
.checked {
	color:#0a7cfc !important;
}
</style>
